<template>
  <qx-table :option="tableOption" :remoteData="remoteData" class="col" rowKey="positionCode">
    <template v-slot:top>
      <qx-form v-model="searchForm" :option="searchOption" isSearch @submit="startSearch">
        <template v-slot:startCoord="{ attrs }">
          <div class="row no-wrap q-gutter-x-md">
            <q-number v-model="searchForm.positionXStart" v-bind="{ ...attrs, placeholder: 'x'}"></q-number>
            <q-number v-model="searchForm.positionYStart" v-bind="{ ...attrs, placeholder: 'y'}"></q-number>
          </div>
        </template>
        <template v-slot:endCoord="{ attrs }">
          <div class="row no-wrap q-gutter-x-md">
            <q-number v-model="searchForm.positionXEnd" v-bind="{ ...attrs, placeholder: 'x'}"></q-number>
            <q-number v-model="searchForm.positionYEnd" v-bind="{ ...attrs, placeholder: 'y'}"></q-number>
          </div>
        </template>
      </qx-form>
      <div class="warning-tips text-weight-medium row items-center no-wrap q-mb-sm">
        <q-icon class="map-warning-tips-icon" name="mdi-information-variant" size="1.25rem"></q-icon>
        <div>{{ isBinding ? $t('MapCore.UnboundStationList') : $t('MapCore.BoundStationList') }}</div>
      </div>
    </template>
    <template v-slot:menuLeft="{ selected }">
      <q-btn :disabled="!selected.length" color="primary" outline unelevated @click="handleBind(selected)">
        {{ isBinding ? $t('BatchBinding') : $t('BatchUnbinding') }}
      </q-btn>
    </template>
  </qx-table>
</template>
<script setup>
import { i18n, toI18nName } from 'boot/i18n'
import { postAPI } from 'src/api'
import { getRemoteData } from 'src/enum/ajaxRemoteData.js'
import { createDialog } from 'src/utils/utils'
import { computed, ref, watchPostEffect } from 'vue'

const props = defineProps({ rowInfo: Object, isBinding: Boolean })

const searchForm = ref({})
const pointTypes = ref([])
const remoteData = ref({ dicUrl: '/yfagv/api/mapPoint/list' })
const isRefresh = defineModel('isRefresh', { type: Boolean, default: false })
const modalVisible = defineModel('modelValue', { type: Boolean, default: false })
getRemoteData('station_type', '/yfagv/api/mapElementType/list').then(data => (pointTypes.value = data))
const searchOption = computed(() => {
  return {
    searchSpan: 8, labelWidth: 70,
    column: [{
      label: `${i18n.t('MapCore.StationType')}`, field: 'positionType', type: 'select', options: pointTypes.value,
      props: { label: toI18nName('elementTypeNameZhCn'), value: 'elementTypeCode' }
    }, {
      label: i18n.t('MapCore.StationCode'), field: 'positionCode'
    }, {
      label: `${i18n.t('MapCore.StationName')}`, field: 'positionName'
    }, {
      label: `${i18n.t('MapCore.StartCoord')}`, field: 'startCoord', formslot: true
    }, {
      label: `${i18n.t('MapCore.EndCoord')}`, field: 'endCoord', formslot: true
    }]
  }
})
const tableOption = computed(() => {
  return {
    selection: 'multiple',
    column: [{
      label: `${i18n.t('MapCore.StationType')}`, field: 'positionType', options: pointTypes.value,
      props: { label: toI18nName('elementTypeNameZhCn'), value: 'elementTypeCode' }, minWidth: 80
    }, {
      label: i18n.t('MapCore.StationCode'), field: 'positionCode', minWidth: 80
    }, {
      label: `${i18n.t('MapCore.StationName')}`, field: 'positionName', minWidth: 80
    }, {
      label: `${i18n.t('MapCore.StationCoord')}`, field: 'positionXY', minWidth: 80,
      format: (_, row) => `${row.positionX ?? ''}, ${row.positionY ?? ''}`
    }]
  }
})

const handleBind = selected => {
  const { isBinding } = props, { areaName: name } = props.rowInfo || {}
  const msg = isBinding ? i18n.t('MapCore.BatchBindingTips', { name }) : i18n.t('MapCore.BatchUnbindingTips', { name })
  createDialog({ msg }, () => {
    const uri = isBinding ? '/yfagv/api/mapArea/bindPoints' : '/yfagv/api/mapArea/unBindPoints'
    const mapPointCodeList = selected.map(el => el.positionCode), { areaCode } = props.rowInfo || {}
    postAPI(uri, { areaCode, mapPointCodeList }, () => isRefresh.value = true)
  }, () => {})
}

const formatSearchForm = () => {
  const params = { ...searchForm.value }, { areaCode, mapGroundCode } = props.rowInfo || {}
  params.mapGroundCode = mapGroundCode
  if (props.isBinding) params.notIntTcrAreaCode = areaCode
  else params.intTcrAreaCode = areaCode
  return { ...params }
}
const startSearch = (_, done, clearRows) => {
  remoteData.value.params = formatSearchForm()
  if (clearRows) remoteData.value.clearRows = clearRows
  remoteData.value.clearSelected = true
  isRefresh.value = false
  done && done()
}
watchPostEffect(() => {
  if (isRefresh.value) startSearch()
  if (modalVisible.value) startSearch(void 0, void 0, true)
})
</script>